<m-notice [icon]="'flaticon-exclamation m--font-primary'">
	For more info please check the components's official demos & documentation
	<a class="m-link" href="https://material.angular.io/components/autocomplete/overview" target="_blank">demos & documentation</a>
</m-notice>

<div class="row">
	<div class="col-xl-6">
		<m-material-preview [viewItem]="exampleSimpleAutocomplete">
			<div class="m-section">
				<span class="m-section__sub">The autocomplete is a normal text input enhanced by a panel of suggested options.
				</span>
				<div class="m-separator m-separator--dashed"></div>
				<div class="m-section__content">
					<form class="example-form">
						<mat-form-field class="example-full-width">
							<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto1">
							<mat-autocomplete #auto1="matAutocomplete">
								<mat-option *ngFor="let option of options" [value]="option">
									{{ option }}
								</mat-option>
							</mat-autocomplete>
						</mat-form-field>
					</form>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleAddingACustomFilter">
			<div class="m-section">
				<span class="m-section__sub">
					At this point, the autocomplete panel should be toggleable on focus and options should be selectable. But if we want our options to filter when we type, we need to add a custom filter.
				</span>
				<div class="m-separator m-separator--dashed"></div>

				<div class="m-section__content">
					<form class="example-form">
						<mat-form-field class="example-full-width">
							<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl2" [matAutocomplete]="auto2">
							<mat-autocomplete #auto2="matAutocomplete">
								<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
									{{ option }}
								</mat-option>
							</mat-autocomplete>
						</mat-form-field>
					</form>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleSettingSeparateControlAndDisplayValues">
			<div class="m-section">
				<span class="m-section__sub">
					If you want the option's control value (what is saved in the form) to be different than the option's display value (what is displayed in the text field), you'll need to set the
					<code>displayWith</code> property on your autocomplete element. A common use case for this might be if you want to save your data as an object, but display just one of the option's string properties. To make this work, create a function on your component class that maps the control value to the desired display value. Then bind it to the autocomplete's
					<code>displayWith</code> property.
				</span>
				<div class="m-separator m-separator--dashed"></div>
				<div class="m-section__content">
					<form class="example-form">
						<mat-form-field class="example-full-width">
							<input type="text" placeholder="Assignee" aria-label="Assignee" matInput [formControl]="myControl33" [matAutocomplete]="auto33">
							<mat-autocomplete #auto33="matAutocomplete" [displayWith]="displayFn">
								<mat-option *ngFor="let option of filteredOptions33 | async" [value]="option">
									{{ option.name }}
								</mat-option>
							</mat-autocomplete>
						</mat-form-field>
					</form>
				</div>
			</div>
		</m-material-preview>
	</div>

	<div class="col-xl-6">

		<m-material-preview [viewItem]="exampleAutomaticallyHighlightingTheFirstOption">
			<div class="m-section">
				<span class="m-section__sub">
					If your use case requires for the first autocomplete option to be highlighted when the user opens the panel, you can do so by setting the
					<code>autoActiveFirstOption</code> input on the
					<code>mat-autocomplete</code> component. This behavior can be configured globally using the
					<code>MAT_AUTOCOMPLETE_DEFAULT_OPTIONS</code> injection token.
				</span>
				<div class="m-separator m-separator--dashed"></div>

				<div class="m-section__content">
					<form class="example-form">
						<mat-form-field class="example-full-width">
							<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl44" [matAutocomplete]="auto44">
							<mat-autocomplete autoActiveFirstOption #auto44="matAutocomplete">
								<mat-option *ngFor="let option of filteredOptions44 | async" [value]="option">
									{{ option }}
								</mat-option>
							</mat-autocomplete>
						</mat-form-field>
					</form>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleAutocompleteOverview">
			<div class="m-section">
				<span class="m-section__sub">
					If your use case requires for the first autocomplete option to be highlighted when the user opens the panel, you can do so by setting the
					<code>autoActiveFirstOption</code> input on the
					<code>mat-autocomplete</code> component. This behavior can be configured globally using the
					<code>MAT_AUTOCOMPLETE_DEFAULT_OPTIONS</code> injection token.
				</span>
				<div class="m-separator m-separator--dashed"></div>
				<div class="m-section__content">
					<form class="example-form">
						<mat-form-field class="example-full-width">
							<input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto55" [formControl]="stateCtrl">
							<mat-autocomplete #auto55="matAutocomplete">
								<mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
									<img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" />
									<span>{{ state.name }}</span> |
									<small>Population: {{state.population}}</small>
								</mat-option>
							</mat-autocomplete>
						</mat-form-field>
						<br />
						<mat-slide-toggle [checked]="stateCtrl.disabled" (change)="stateCtrl.disabled ? stateCtrl.enable() : stateCtrl.disable()">
							Disable Input?
						</mat-slide-toggle>
					</form>
				</div>
			</div>

		</m-material-preview>

		<m-material-preview [viewItem]="exampleOptionGroupsAutocomplete">
			<div class="m-section">
				<span class="m-section__sub">
					<code>mat-option</code>can be collected into groups using the mat-optgroup element:
				</span>
				<div class="m-separator m-separator--dashed"></div>
				<div class="m-section__content">
					<form [formGroup]="stateForm">
						<mat-form-field>
							<input type="text" 
								matInput 
								placeholder="States Group" 
								formControlName="stateGroup" 
								required 
								[matAutocomplete]="autoGroup" />
							<mat-autocomplete #autoGroup="matAutocomplete">
								<mat-optgroup *ngFor="let group of stateGroupOptions | async" [label]="group.letter">
									<mat-option *ngFor="let name of group.names" [value]="name">
										{{ name }}
									</mat-option>
								</mat-optgroup>
							</mat-autocomplete>
						</mat-form-field>
					</form>
				</div>
			</div>
		</m-material-preview>
	</div>
</div>